@model PostPagerModel

@inject IStringLocalizer<Resource> _localizer

@{
  var featured = Model.Pager.Items.Where(p => p.State == PostState.Featured).Take(3).ToList();
}

@if (featured.Any())
{
  <div id="carouselFeatured" class="featured carousel slide carousel-dark" data-bs-ride="carousel" aria-label="Slideshow">
    <div class="carousel-inner">
      @{
        var i = 0;
        foreach (var item in featured)
        {
          var active = i == 0 ? "active" : string.Empty;
          i++;
          <div class="carousel-item @active">
            <article class="featured-item row">
              <section class="col-lg-7">
                <figure class="featured-cover" aria-hidden="true">
                  <a href="~/post/@item.Slug" class="featured-cover-link" tabindex="-1">
                    <img class="featured-cover-img" alt="POST_TITLE" src="@PageHelper.CheckGetCoverrUrl(item.Cover)">
                  </a>
                  <figcaption class="visually-hidden">@item.Title</figcaption>
                </figure>
              </section>
              <section class="featured-content col-lg-5 my-auto">
                <h2 class="featured-title">
                  <a class="featured-link" href="~/post/@item.Slug">@item.Title</a>
                </h2>
                <div class="featured-meta d-none d-md-flex">
                  <div class="featured-author">
                    <img class="featured-author-img" src="@PageHelper.CheckGetAvatarUrl(item.User.Avatar)" width="16" height="16" alt="@item.User.NickName">
                    <span class="featured-author-name">@item.User.NickName</span>
                  </div>
                  <div class="featured-date">
                    <svg width="13" height="13" class="bi bi-calendar-event featured-date-icon">
                      <use xlink:href="/_content/@ThemesStandardConstant.AssemblyName/img/icon-sprites.svg#bi-calendar-event"></use>
                    </svg>
                    <time class="featured-date-time">@DateTimeHelper.ToFriendlyShortDateString(item.PublishedAt)</time>
                  </div>
                  @if (item.Categories != null)
                  {
                    <div class="featured-cat">
                      <svg width="17" height="17" class="bi bi-hash featured-cat-icon">
                        <use xlink:href="/_content/@ThemesStandardConstant.AssemblyName/img/icon-sprites.svg#bi-hash"></use>
                      </svg>
                      @foreach (var cat in item.Categories)
                      {
                        <a class="featured-cat-title" href="~/category/@cat.Content" tabindex="-1">@cat.Content</a>
                      }
                    </div>
                  }
                </div>
                <p class="featured-desc">
                  @item.Description
                </p>
                <a class="featured-more" href="~/post/@item.Slug">
                  @_localizer["read-more"]
                  <svg width="16" height="16" class="bi bi-arrow-right">
                    <use xlink:href="/_content/@ThemesStandardConstant.AssemblyName/img/icon-sprites.svg#bi-arrow-right"></use>
                  </svg>
                </a>
              </section>
            </article>
          </div>
        }
      }
    </div>
    <button class="carousel-control-prev featured-prev d-none d-xl-block" type="button" data-bs-target="#carouselFeatured" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">
        @_localizer["previous"]
      </span>
    </button>
    <button class="carousel-control-next featured-next d-none d-xl-block" type="button" data-bs-target="#carouselFeatured" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">
        @_localizer["next"]
      </span>
    </button>
  </div>
}
